<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--单选框-->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h3>选择同意？ {{isAgree}}</h3>
    <button :disabled="!isAgree">下一步</button>
    
    <hr>
    <!--多选框-->
    
    <input type="checkbox" value="火影" v-model="hobbies">火影
    <input type="checkbox" value="海贼王" v-model="hobbies">海贼王
    <input type="checkbox" value="犬夜叉" v-model="hobbies">犬夜叉
    <h3>你的爱好是：{{hobbies}}</h3>
    <hr>
    
    <label v-for="item in originHobbies">
        <input type="checkbox" :value="item" v-model="hobbies">{{item}}<br>
    </label>
    
</div>


<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！",
            isAgree: false,
            hobbies: [],
            originHobbies: ["哆啦啊梦","功夫","灌篮高手","火影忍者"]
        },
        methods: {
            
        }
    });
</script>
</body>
</html>